<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>TF管理系统</title>
    <link th:href="@{/TFSystem/css/clndr.css}" rel="stylesheet"/>
    <link th:href="@{/TFSystem/css/table-responsive.css}" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="author" content="lock"/>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/png"/>
    <link th:href="@{/TFSystem/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/TFSystem/css/style-responsive.css}" rel="stylesheet"/>
</head>
<body class="sticky-header">
<section>
    <div class="left-side sticky-left-side" style="overflow: hidden; color:#333021" tabindex="5000">

        <div class="logo">
            <a href="#">
                <img th:src="@{/TFSystem/img/logo.png}" alt="TF管理系统"/>
            </a>
        </div>
        <div class="logo-icon text-center">
            <a href="#">
                <img th:src="@{/TFSystem/img/logo_icon.png}" style="width: 40px;" alt="TF管理系统"/>
            </a>
        </div>
        <div class="left-side-inner">
            <div class="visible-xs hidden-sm hidden-md hidden-lg">
                <div class="media logged-user">
                    <img alt="libai" th:src="@{/TFSystem/img/96d7546cbe9cbe9e36ce11ffd9afcc95-cropper.jpg}"
                         class="media-object"/>
                    <div class="media-body">
                        <h4>
                            <a href="">libai</a>
                        </h4>
                        <span>TF管理系统</span>
                    </div>
                </div>
                <h5 class="left-nav-title">控制台</h5>
                <ul class="nav nav-pills nav-stacked custom-nav">
                    <li>
                        <a href="">
                            <i class="fa fa-user"></i>
                            <span>个人设置</span>
                        </a>
                    </li>
                    <li>
                        <a href="/user/logout">
                            <i class="fa fa-sign-out"></i>
                            <span>退出</span></a>
                    </li>
                </ul>
            </div>

            <ul class="nav nav-pills nav-stacked custom-nav js-left-nav">
                <li class="">
                    <a th:href="@{/user/index}">
                        <i class="fa fa-home"></i>
                        <span>个人中心</span>
                    </a>
                </li>
                <li>
                    <a href="/user_plain">
                        <i class="fa fa-tasks"></i>
                        <span>健身方案</span>
                    </a>
                </li>
                <li class="">
                    <a th:href="@{/user/courses}">
                        <i class="fa fa-book"></i>
                        <span>我的课程</span>
                    </a>
                </li>

                <li class="">
                    <a th:href="@{/user/events}">
                        <i class="fa fa-book"></i>
                        <span>我的运动</span>
                    </a>
                </li>
            </ul>

        </div>
    </div>
    <div class="main-content">
        <div class="header-section">
            <a class="toggle-btn">
                <i class="fa fa-bars"></i>
            </a>
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                        </a>

                    </li>
                    <li>
                        <a href="javascript:;" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img th:src="@{/TFSystem/img/96d7546cbe9cbe9e36ce11ffd9afcc95-cropper.jpg}"/>
                            <!--/*@thymesVar id="userVO" type="com.vo.UserVO"*/-->
                            <div th:text="${userVO.userName}"></div>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li>
                                <a th:href="@{/user/index}">
                                    <i class="fa fa-user"></i>
                                    个人主页
                                </a>
                            </li>
                            <li>
                                <a th:href="@{/user/edit}">
                                    <i class="fa fa-cog"></i>
                                    更换密码
                                </a>
                            </li>
                            <li>
                                <a th:href="@{/user/logout}">
                                    <i class="fa fa-sign-out"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrapper pre-scrollable">
            <div class="row">
                <div class="col-md-4  ">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="profile-pic text-center">
                                        <img alt="李白" th:src="@{/TFSystem/img/96d7546cbe9cbe9e36ce11ffd9afcc95-cropper.jpg}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <ul class="p-info">
                                        <li>
                                            <div class="title">姓名</div>
                                            <!--/*@thymesVar id="userVO" type="com.vo.UserVO"*/-->
                                            <div class="desk" th:text="${userVO.userName}"></div>
                                        </li>
                                        <li>
                                            <div class="title">性别</div>
                                            <!--/*@thymesVar id="userVO" type="com.vo.UserVO"*/-->
                                            <div class="desk" th:if="${userVO.sex}">男</div>
                                            <div class="desk" th:if="${userVO.sex}==flase">女</div>
                                        </li>
                                        <li>
                                            <div class="title">电话</div>
                                            <!--/*@thymesVar id="userVO" type="com.vo.UserVO"*/-->
                                            <div class="desk" th:text="${userVO.phone}"></div>
                                        </li>
                                        <li>
                                            <div class="title">VIP NUM</div>
                                            <!--/*@thymesVar id="userVO" type="com.vo.UserVO"*/-->
                                            <div class="desk" th:if="${userVO.vipNum}"></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body p-states">
                                    <h4 class="title">健身计划</h4>
                                    <ul class="dropdown-list normal-list">
                                        <li class="new">
                                            <a href="#noticeModal" data-toggle="modal" data-content="222">
                                                <span class="label label-danger">
                                                    <i class="fa fa-bolt"></i>
                                                </span>
                                                <span class="name">xz的计划啊. </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="calendar-block ">
                                        <div class="cal1">
                                            <div class="clndr">
                                                <div class="clndr-controls">
                                                    <div class="clndr-control-button">
                                                        <span class="clndr-previous-button">
                                                            <i class="fa fa-chevron-left"></i>
                                                        </span>
                                                    </div>
                                                    <div class="month">
                                                        <span>July</span> 2017
                                                    </div>
                                                    <div class="clndr-control-button leftalign">
                                                        <span class="clndr-next-button">
                                                            <i class="fa fa-chevron-right"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                                <table class="clndr-table" cellspacing="0" cellpadding="0" border="0">
                                                    <thead>
                                                    <tr class="header-days">
                                                        <td class="header-day">S</td>
                                                        <td class="header-day">M</td>
                                                        <td class="header-day">T</td>
                                                        <td class="header-day">W</td>
                                                        <td class="header-day">T</td>
                                                        <td class="header-day">F</td>
                                                        <td class="header-day">S</td>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td class="day past adjacent-month last-month calendar-day-2017-06-25">
                                                            <div class="day-contents">25</div>
                                                        </td>
                                                        <td class="day past adjacent-month last-month calendar-day-2017-06-26">
                                                            <div class="day-contents">26</div>
                                                        </td>
                                                        <td class="day past adjacent-month last-month calendar-day-2017-06-27">
                                                            <div class="day-contents">27</div>
                                                        </td>
                                                        <td class="day past adjacent-month last-month calendar-day-2017-06-28">
                                                            <div class="day-contents">28</div>
                                                        </td>
                                                        <td class="day past adjacent-month last-month calendar-day-2017-06-29">
                                                            <div class="day-contents">29</div>
                                                        </td>
                                                        <td class="day past adjacent-month last-month calendar-day-2017-06-30">
                                                            <div class="day-contents">30</div>
                                                        </td>
                                                        <td class="day past calendar-day-2017-07-01">
                                                            <div class="day-contents">1</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="day past calendar-day-2017-07-02">
                                                            <div class="day-contents">2</div>
                                                        </td>
                                                        <td class="day past calendar-day-2017-07-03">
                                                            <div class="day-contents">3</div>
                                                        </td>
                                                        <td class="day past calendar-day-2017-07-04">
                                                            <div class="day-contents">4</div>
                                                        </td>
                                                        <td class="day past calendar-day-2017-07-05">
                                                            <div class="day-contents">5</div>
                                                        </td>
                                                        <td class="day past calendar-day-2017-07-06">
                                                            <div class="day-contents">6</div>
                                                        </td>
                                                        <td class="day past calendar-day-2017-07-07">
                                                            <div class="day-contents">7</div>
                                                        </td>
                                                        <td class="day today calendar-day-2017-07-08">
                                                            <div class="day-contents">8</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="day calendar-day-2017-07-09">
                                                            <div class="day-contents">9</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-10">
                                                            <div class="day-contents">10</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-11">
                                                            <div class="day-contents">11</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-12">
                                                            <div class="day-contents">12</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-13">
                                                            <div class="day-contents">13</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-14">
                                                            <div class="day-contents">14</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-15">
                                                            <div class="day-contents">15</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="day calendar-day-2017-07-16">
                                                            <div class="day-contents">16</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-17">
                                                            <div class="day-contents">17</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-18">
                                                            <div class="day-contents">18</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-19">
                                                            <div class="day-contents">19</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-20">
                                                            <div class="day-contents">20</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-21">
                                                            <div class="day-contents">21</div>
                                                        </td>
                                                        <td class="day event calendar-day-2017-07-22">
                                                            <div class="day-contents">22</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="day event calendar-day-2017-07-23">
                                                            <div class="day-contents">23</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-24">
                                                            <div class="day-contents">24</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-25">
                                                            <div class="day-contents">25</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-26">
                                                            <div class="day-contents">26</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-27">
                                                            <div class="day-contents">27</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-28">
                                                            <div class="day-contents">28</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-29">
                                                            <div class="day-contents">29</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="day calendar-day-2017-07-30">
                                                            <div class="day-contents">30</div>
                                                        </td>
                                                        <td class="day calendar-day-2017-07-31">
                                                            <div class="day-contents">31</div>
                                                        </td>
                                                        <td class="day adjacent-month next-month calendar-day-2017-08-01">
                                                            <div class="day-contents">1</div>
                                                        </td>
                                                        <td class="day adjacent-month next-month calendar-day-2017-08-02">
                                                            <div class="day-contents">2</div>
                                                        </td>
                                                        <td class="day adjacent-month next-month calendar-day-2017-08-03">
                                                            <div class="day-contents">3</div>
                                                        </td>
                                                        <td class="day adjacent-month next-month calendar-day-2017-08-04">
                                                            <div class="day-contents">4</div>
                                                        </td>
                                                        <td class="day adjacent-month next-month calendar-day-2017-08-05">
                                                            <div class="day-contents">5</div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="profile-desk">
                                        <h1>课程<a class="pull-right" style="font-size: 16px;" th:href="@{/user/courses}">更多</a>
                                        </h1>
                                        <table class="table table-bordered table-striped table-condensed cf">
                                            <thead class="cf">
                                            <tr>
                                                <th>课程名称</th>
                                                <th>结束日期</th>
                                                <th class="numeric">教练</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <!--/*@thymesVar id="courses" type="com.vo.CourseDTO"*/-->
                                            <tr th:each="course: ${courses}">
                                                <td>
                                                    <!--/*@thymesVar id="course_name" type="java.lang.String"*/-->
                                                    <a th:text="${course.course_name}"></a>
                                                </td>
                                                <!--/*@thymesVar id="end_time" type="java.sql.Timestamp"*/-->
                                                <td th:text="${#dates.format(course.end_time,'yyyy-MM-dd HH:mm:ss')}"></td>

                                                <td><!--/*@thymesVar id="coachName" type="java.lang.String"*/-->
                                                <a href="user_index.html" th:text="${course.coachName}"></a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="profile-desk">
                                        <h1>任务<a class="pull-right" style="font-size: 16px;" th:href="@{/user/events}">更多</a>
                                        </h1>
                                        <table class="table table-bordered table-striped table-condensed cf">
                                            <thead class="cf">
                                            <tr>
                                                <th>运动名称</th>
                                                <th>结束日期</th>
                                                <th class="numeric">教练</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <!--/*@thymesVar id="events" type="com.vo.CourseDTO"*/-->
                                            <tr th:each="event: ${events}">
                                                <td>
                                                    <!--/*@thymesVar id="course_name" type="java.lang.String"*/-->
                                                    <a th:text="${event.course_name}"></a>
                                                </td>
                                                <!--/*@thymesVar id="end_time" type="java.sql.Timestamp"*/-->
                                                <td th:text="${#dates.format(event.end_time,'yyyy-MM-dd HH:mm:ss')}"></td>

                                                <td><!--/*@thymesVar id="coachName" type="java.lang.String"*/-->
                                                    <a href="user_index.html" th:text="${event.coachName}"></a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</section>

<div id="ascrail2000" class="nicescroll-rails"
     style="width: 6px; z-index: 1000; background: rgb(66, 79, 99) none repeat scroll 0% 0%; cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 0;">
    <div style="position: relative; top: 0px; float: right; width: 6px; height: 188px; background-color: rgb(101, 206, 167); border: 0px none; background-clip: padding-box; border-radius: 0px;"></div>
</div>
<div id="ascrail2000-hr" class="nicescroll-rails"
     style="height: 6px; z-index: 1000; background: rgb(66, 79, 99) none repeat scroll 0% 0%; position: fixed; left: 0px; width: 100%; bottom: 0px; cursor: default; display: none; opacity: 0;">
    <div style="position: relative; top: 0px; height: 6px; width: 1366px; background-color: rgb(101, 206, 167); border: 0px none; background-clip: padding-box; border-radius: 0px;"></div>
</div>
<div id="ascrail2001" class="nicescroll-rails"
     style="width: 3px; z-index: 100; background: rgb(66, 79, 99) none repeat scroll 0% 0%; cursor: default; position: fixed; top: 0px; left: 137px; height: 636px; display: none; opacity: 0;">
    <div style="position: relative; top: 0px; float: right; width: 3px; height: 0px; background-color: rgb(101, 206, 167); border: 0px none; background-clip: padding-box; border-radius: 0px;"></div>
</div>
<div id="ascrail2001-hr" class="nicescroll-rails"
     style="height: 3px; z-index: 100; background: rgb(66, 79, 99) none repeat scroll 0% 0%; top: 633px; left: 0px; position: fixed; cursor: default; display: none; opacity: 0;">
    <div style="position: relative; top: 0px; height: 3px; width: 0px; background-color: rgb(101, 206, 167); border: 0px none; background-clip: padding-box; border-radius: 0px; left: 0px;"></div>
</div>
<script th:src="@{/TFSystem/js/jquery.validate.js}"></script>
<script th:src="@{/TFSystem/js/opms.js}"></script>
<script th:src="@{/TFSystem/js/clndr.js}"></script>
<script th:src="@{/TFSystem/js/evnt.calendar.init.js}"></script>
<script th:src="@{/TFSystem/js/moment-2.2.1.js}"></script>
<script th:src="@{/TFSystem/js/underscore-min.js}"></script>
<script th:src="@{/TFSystem/js/jquery.min.js}"></script>
<script th:src="@{/TFSystem/js/bootstrap.min.js}"></script>
<script th:src="@{/TFSystem/js/jquery.nicescroll.js}"></script>
<script th:src="@{/TFSystem/js/scripts.js}"></script>
<script>
    $(function () {
        $('#noticeModal').on('show.bs.modal', function (e) {
            $('#notice-box').html($(e.relatedTarget).attr('data-content'))
        });
    })
</script>
</body>
</html>
